<template>
	<div class="box">
		<div class="head">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item :to="{ path:'/feedback' }"><span style="font-size: 18px;">反馈管理</span>
				</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="main">
			<div class="top">
				<span style="margin-left: 10px;">搜索:</span>
				<input type="text" placeholder="请输入用户名" v-model="ss">
				<button :class="isActive?'buttontwo':'button'" @click="seach()">查询</button>
			</div>
			<div class="form">
				<template>
					<el-table :data="tableData" style="width: 100%;">
						<el-table-column prop="id" label="序号">
						</el-table-column>
						<el-table-column prop="problem_phone" label="用户手机号">
						</el-table-column>
						<el-table-column prop="problem_text" label="用户反馈信息">
						</el-table-column>
						<el-table-column prop="cz" label="操作">
							<template slot-scope="scope">
								<span class="jr" @click="reply(scope.row.id)">回复</span>
							</template>
						</el-table-column>
					</el-table>
				</template>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				tableData: [],
				ss: '',
				isActive: false
			}
		},
		watch: {
			ss(e) {
				if (e.length > 0) {
					this.isActive = true
				} else {
					this.isActive = false
				}
			}
		},
		mounted() {
			this.getfeedback()
		},
		methods: {
			seach() {
				var _this = this
				// console.log(this.set)
				axios.get('/getfeedback', {
					params: {
						phone: this.ss
					}
				}).then(function(res) {
					console.log(res)
					_this.tableData = res.data.res
				})
			},
			reply(id) {
				this.$prompt('请输入回复', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
				}).then(({
					value
				}) => {
					console.log(value)
					var _this = this
					axios.post('/replyfeedback',{
						id,
						value
					}).then(function(res) {
						console.log(res)
						if (res.data.code == 200) {
							_this.getfeedback()
							_this.$message({
								message: res.data.msg
							})
						}
					})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '取消输入'
					});
				});

			},
			getfeedback() {
				var _this = this
				axios.get('/getfeedback').then(function(res) {
					console.log(res)
					if (res.data.code == 200) {
						_this.tableData = res.data.res
					}
				})
			}
		}
	}
</script>

<style scoped>
	.box {
		width: 100%;
		height: 80%;
	}

	.head {
		width: 100%;
		height: 5%;
	}

	.top {
		width: 100%;
		height: 60px;
		line-height: 60px;
		text-align: left;
	}

	/deep/.el-dialog {
		width: 30%;
	}

	/deep/ .el-table thead th.el-table__cell {
		background-color: #f5f5f5;
		text-align: center;
	}

	/deep/ .el-table--enable-row-transition .el-table__body td.el-table__cell {
		text-align: center;
	}

	/deep/ .el-table td.el-table__cell,
	.el-table th.el-table__cell.is-leaf {
		border: 1px solid #EBEEF5;
		;
	}

	.main {
		width: 100%;
		height: 700px;
		background: #FFFFFF;
	}

	.jr {
		color: #6e9eec;
		margin-left: 10px;
		text-decoration: none;
	}

	.button {
		margin-left: 10px;
		background: gray;
		color: #fff;
		border: none;
	}

	.buttontwo {
		margin-left: 15px;
		background: #0099FF;
		color: #fff;
		border: none;
	}

	.add {
		width: 400px;
		height: 500px;
		background: red;
	}
</style>
